<template>
  <div id="app">
    <!-- 正常界面内容 -->
    <div class="main">
      <div class="left">
        <!-- 存放logo图片 -->
        <div class="img"></div>
        <div class="title">基础框架后台管理</div>
        <el-row class="tac">
          <el-col :span="24">
            <el-menu
              default-active="1"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              @select="handleSelect"
            >
              <el-menu-item index="1">
                <template slot="title">
                  <i class="el-icon-platform-eleme"></i>
                  <span>首页</span>
                </template>
              </el-menu-item>
              <!-- 基础管理 -->
              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-s-tools"></i>
                  <span slot="title">基础管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="2-1">
                    <i class="el-icon-upload"></i>文件资源</el-menu-item
                  >
                  <el-menu-item index="2-2">
                    <i class="el-icon-coin"></i>数据库资源</el-menu-item
                  >
                  <el-menu-item index="2-3">
                    <i class="el-icon-more-outline"></i>其它资源</el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>

              <!-- 系统管理 -->
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-setting"></i>
                  <span slot="title">系统管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="3-1">
                    <i class="el-icon-user-solid"></i>用户管理</el-menu-item
                  >
                  <el-menu-item index="3-2">
                    <i class="el-icon-coordinate"></i>角色管理</el-menu-item
                  >
                  <el-menu-item index="3-3">
                    <i class="el-icon-more-outline"></i>菜单管理</el-menu-item
                  >
                  <el-menu-item index="3-4">
                    <i class="el-icon-s-custom"></i>部门管理</el-menu-item
                  >
                  <el-menu-item index="3-5">
                    <i class="el-icon-s-check"></i>岗位管理</el-menu-item
                  >
                  <el-menu-item index="3-6">
                    <i class="el-icon-message"></i>字典管理</el-menu-item
                  >
                  <el-menu-item index="3-7">
                    <i class="el-icon-edit"></i>代码生成</el-menu-item
                  >
                </el-menu-item-group>
                <!-- 日志管理 -->
                <el-submenu index="3-8">
                  <template slot="title">
                    <i class="el-icon-s-order"></i>
                    <span slot="title">日志管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="3-8-1">
                      <i class="el-icon-upload"></i>操作日志</el-menu-item
                    >
                    <el-menu-item index="3-8-2">
                      <i class="el-icon-coin"></i>登录日志</el-menu-item
                    >
                  </el-menu-item-group>
                </el-submenu>
              </el-submenu>

              <!-- 系统监控 -->
              <el-submenu index="4">
                <template slot="title">
                  <i class="el-icon-view"></i>
                  <span slot="title">系统监控</span>
                </template>
                <el-menu-item-group>
                  <!-- 在线任务 -->
                  <el-menu-item index="4-1">
                    <i class="el-icon-monitor"></i>在线任务</el-menu-item
                  >
                  <!-- 定时任务 -->
                  <el-menu-item index="4-2">
                    <i class="el-icon-coin"></i>定时任务</el-menu-item
                  >
                  <!-- 服务监控 -->
                  <el-menu-item index="4-3">
                    <i class="el-icon-s-grid"></i>服务监控</el-menu-item
                  >
                  <!-- 数据监控 -->
                  <el-menu-item index="4-4">
                    <i class="el-icon-s-platform"></i>数据监控</el-menu-item
                  >
                  <!-- 缓存监控 -->
                  <el-menu-item index="4-5">
                    <i class="el-icon-message"></i>缓存监控</el-menu-item
                  >
                  <!-- 系统监控 -->
                  <el-menu-item index="4-6">
                    <i class="el-icon-s-opportunity"></i>系统监控</el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </div>
      <div class="right">
        <TOP ref="topComponent" />
        <!-- 记录路由显示的 -->
        <div class="router">
          <div class="tag">
            <el-tag
              v-for="(route, index) in routeHistory"
              :key="index"
              closable
              @close="removeRoute(index)"
              @click="handleTagClick(route)"
              :class="{ 'active-route': isActiveRoute(route) }"
              :style="
                index === 0
                  ? 'border-radius: 0px;'
                  : 'border-radius: 0px;'
              "
            >
              {{ route }}
            </el-tag>
          </div>
        </div>
        <div class="other">   
            <!-- 插槽用于插入内容 -->
            <slot name="otherContent"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted } from "vue";
import TOP from "../../components/top/index.vue";
export default {
  name: "left",
  components: {
    TOP,
  },
  data() {
    return {
      routeHistory: ['首页']
    };
  },

  methods: {
    handleOpen(key, keyPath) {
      console.log('open:', key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log('close:', key, keyPath);
    },
    handleSelect(index) {
      const routePaths = {
        1: "/index",
        "2-1": "/file-resources",
        "2-2": "/database-resources",
        "2-3": "/other-resources",
        "3-1": "/user-management",
        "3-2": "/role-management",
        "3-3": "/menu-management",
        "3-4": "/department-management",
        "3-5": "/job-management",
        "3-6": "/dictionary-management",
        "3-7": "/code-generation",
        "3-8": "/log-management",
        "3-8-1": "/operation-log",
        "3-8-2": "/loginlog",
        "4-1": "/online-task",
        "4-2": "/scheduled-task",
        "4-3": "/service-monitoring",
        "4-4": "/data-monitoring",
        "4-5": "/cache-monitoring",
        "4-6": "/system-monitoring",
      };

      // 根据 index 找到对应的路径
      const targetPath = routePaths[index];
      // 通过 $refs 获取 TOP 组件的实例
      const topComponentInstanceData = this.$refs.topComponent.$data;

      // console.log(topComponentInstanceData.title);
      if (targetPath && this.$route.path !== targetPath) {
        //将TOP组件中的title值修改成对应的路由
        topComponentInstanceData.title = this.getRouteByIndex(index);
        this.$router.push(targetPath).catch((err) => console.error(err));
      }

      const route = this.getRouteByIndex(index);
      if (route && !this.routeHistory.includes(route)) {
        this.routeHistory.push(route);
        localStorage.setItem("routeHistory", JSON.stringify(this.routeHistory));
      }
    },
    getRouteByIndex(index) {
      const routes = {
        1: "首页",
        "2-1": "文件资源",
        "2-2": "数据库资源",
        "2-3": "其它资源",
        "3-1": "用户管理",
        "3-2": "角色管理",
        "3-3": "菜单管理",
        "3-4": "部门管理",
        "3-5": "岗位管理",
        "3-6": "字典管理",
        "3-7": "代码生成",
        "3-8": "日志管理",
        "3-8-1": "操作日志",
        "3-8-2": "登录日志",
        "4-1": "在线任务",
        "4-2": "定时任务",
        "4-3": "服务监控",
        "4-4": "数据监控",
        "4-5": "缓存监控",
        "4-6": "系统监控",
      };
      return routes[index];
    },
    removeRoute(index) {
      this.routeHistory.splice(index, 1);
      localStorage.setItem("routeHistory", JSON.stringify(this.routeHistory));
    },
    handleTagClick(route) {
      // 根据 route 找到对应的路径
      const routePaths = {
        首页: "/index",
        文件资源: "/file-resources",
        数据库资源: "/database-resources",
        其它资源: "/other-resources",
        用户管理: "/user-management",
        角色管理: "/role-management",
        菜单管理: "/menu-management",
        部门管理: "/department-management",
        岗位管理: "/job-management",
        字典管理: "/dictionary-management",
        代码生成: "/code-generation",
        日志管理: "/log-management",
        操作日志: "/operation-log",
        登录日志: "/loginlog",
        在线任务: "/online-task",
        定时任务: "/scheduled-task",
        服务监控: "/service-monitoring",
        数据监控: "/data-monitoring",
        缓存监控: "/cache-monitoring",
        系统监控: "/system-monitoring",
      };

      const path = routePaths[route];
      if (path && this.$route.path !== path) {
        this.$router.push(path).catch((err) => console.error(err));
      }
    },
    isActiveRoute(route) {
      const routePaths = {
        首页: "/index",
        文件资源: "/file-resources",
        数据库资源: "/database-resources",
        其它资源: "/other-resources",
        用户管理: "/user-management",
        角色管理: "/role-management",
        菜单管理: "/menu-management",
        部门管理: "/department-management",
        岗位管理: "/job-management",
        字典管理: "/dictionary-management",
        代码生成: "/code-generation",
        日志管理: "/log-management",
        操作日志: "/operation-log",
        登录日志: "/loginlog",
        在线任务: "/online-task",
        定时任务: "/scheduled-task",
        服务监控: "/service-monitoring",
        数据监控: "/data-monitoring",
        缓存监控: "/cache-monitoring",
        系统监控: "/system-monitoring",
      };

      const currentPath = this.$route.path;
      const targetPath = routePaths[route];
      return currentPath === targetPath;
    },
  },
  mounted() {
    const savedRouteHistory = localStorage.getItem("routeHistory");
    if (savedRouteHistory) {
      this.routeHistory = JSON.parse(savedRouteHistory);
    }
  },
};
</script>

<style lang="less" scoped>
html,
body,
#app {
  height: 100%;
  margin: 0px;
  padding: 0px;
  .main {
    display: flex;
    .left {
      // height: 900px;
      background-color: #fff;
      width: 18%;
      border-top-left-radius: 10px;
      box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
      .img {
        float: left;
        margin-left: 50px;
        margin-top: 8px;
        margin-right: 5px;
        width: 40px;
        height: 40px;
        background: url("../../assets/images/logo.png") no-repeat;
        background-size: cover;
      }
      .title {
        float: left;
        height: 60px;
        line-height: 60px;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        color: #000;
      }
    }
    .right {
      width: 82%;   
      // height: 900px;
      height: 1000px;
      border-left: 1px solid #ebeef5;
      .router {
        height: 40px;
        line-height: 36px;
        background-color: #fff;
        border: 1px solid #ebeef5;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
        cursor: pointer;
        .tag {
          .el-tag {
            &.active-route {
              background-color: #409eff;
              color: #fff;
            }
            
          }
        }
        .el-tag {
          background-color: #ecf5ff;
          border-color: #d9ecff;
          height: 32px;
          padding: 0 10px;
          line-height: 30px;
          font-size: 12px;
          color: #409eff;
          border-width: 1px;
          border-style: solid;
          border-radius: 4px;
          box-sizing: border-box;
          white-space: nowrap;
        }
      }
      .other {
        margin-left: 20px;
        margin-top: 20px;
        margin-right: 20px;
      }
    }
  }
}
</style>